﻿<template>
  <div>
    <h1>Vue 插槽示例</h1>
    <SlotComponents :dynamic-slot-name="dynamicName">
      <!-- 默认插槽内容 -->
      <p style="color: #42b883">这是默认插槽的内容。</p>

      <template v-slot:main>
        <h2 style="color: #42d392">这是主要区域。</h2>
      </template>
      <!-- 具名插槽: header -->
      <template v-slot:header>
        <h2>这是页头内容。</h2>
      </template>

      <!-- 具名插槽: main -->
<!--      <template v-slot:main>-->
<!--        <p>这是主要内容区域。</p>-->
<!--      </template>-->

      <!-- 具名作用域插槽: footer -->
      <template v-slot:footer="footerProps">
        <p>版权信息：{{ footerProps.footerInfo.company }} {{ footerProps.footerInfo.copyright }}</p>
      </template>

      <!-- 作用域插槽: item -->
      <template v-slot:item="slotProps">
        <div>
          <p>{{ slotProps.item.text }} - 动态内容</p>
        </div>
      </template>

      <!-- 动态插槽名 -->
      <template v-slot:[dynamicName]>
        <p>这是动态插槽名的内容{{}}。</p>
      </template>
    </SlotComponents>
  </div>
</template>

<script>
import SlotComponents from './Components/SlotComponents.vue';

export default {
  components: {
    SlotComponents
  },
  data() {
    return {
      dynamicName: 'extra'  // 动态插槽名
    };
  }
}
</script>
